<template>
  <div>
    <!-- <xxxx :value.sync="show" @update="show = $event" /> -->

    <xxxx :value="show" @update="show = $event" />

    <div @click="show = true">.sync</div>

    <div @click="show2 = true">v-model组件通信</div>
    <zjtx :value="show2" @input="show2 = $event" />
    <!-- <zjtx v-model="show2" /> -->
    <wfrsfwe />
    <mju />
    <excel />
    {{ ds() }}

    <input type="file" @change="ccc">

    <img :src="imgggg" alt="" width="100px">
    <!-- 进度条 -->

    <el-progress :percentage="percentage" />

    <!-- 个人上传图片 -->
    <Uploadsc :value="imgs" @input="imgs =$event" />

    <Uploadsc v-model="imgs" />

    <!-- 二维码生成 -->
    <erweima />

    <!-- 打印插件 -->
    <dayincj />

    <!-- 多选框 -->
    <checkboxmai />

    <!-- 树形结构多选框 -->
    <shuxingjgou />

    <!-- 混入mixins -->
    <mixinsssss />

    <!-- set -->
    <setvue2 />

    <!-- nextTick -->
    <h4>nextTick</h4>

    <NextTIcks />

    <!-- 全屏插件 -->
    <screenfull />

    <!--国际化语言 -->
    <div>
      {{ $t('message') }}
      <button @click="xx('zh')">{{ $t('home.qiehuanzw' ) }}</button>
      <button @click="xx('en')">{{ $t('home.qiehuanyw' ) }}</button>
      <button @click="elneib">内部el</button>
    </div>

    <!-- 组件传值-获取组件实例 -->
    <div>
      <zujianchuanzhi_huoqushili ref="zi" />
      <el-button @click="refhuoqu">ref获取子组件实例</el-button>
      <el-button @click="huoqusyouzj">找出自己所有子组件</el-button>
      <el-button @click="huoqugenzj">找出根组件实例</el-button>
    </div>

    <!-- 兄弟传值 -->
    <xiondichuanzhi />

    <!-- 高阶向低阶传值 -->
    <gaojechuanzhi />
  </div></template>

<script>
import xxxx from './sync.vue'
import zjtx from './v-mode(父子通信).vue'
import mju from './枚举多种方法'
import COS from 'cos-js-sdk-v5'
import dayincj from './打印插件.vue'
const cos = new COS({
  SecretId: 'AKIDQvFQOBnFV7cBnDSW4SfgkdaZM7qOuMcf',
  SecretKey: 'vgFbliRvELI3byDF3jNvLahswpX8Venn'
})
export default {
  provide() {
    return {
      xxx: '大手笔的'
    }
  },
  components: {

    gaojechuanzhi: () => import('./高阶向低阶传值.vue'),
    xiondichuanzhi: () => import('./兄弟传值.vue'),
    zujianchuanzhi_huoqushili: () => import('./components/子_组件传值—获取组件实例.vue'),
    screenfull: () => import('./全屏插件screenfull.vue'),
    setvue2: () => import('./this.$set.vue'),
    mixinsssss: () => import('./mixins封装抽离js.vue'),
    NextTIcks: () => import('./$nextTick.vue'),
    xxxx,
    zjtx,
    dayincj,
    excel: () => import('./测试excel导出.vue'),
    mju,
    erweima: () => import('./二维码生成.vue'),
    checkboxmai: () => import('./checkbox多选框.vue'),
    shuxingjgou: () => import('./树形结构checkbox.vue')

  },
  data() {
    return {
      imgs: 'http://htxm-1378475765.cos.ap-guangzhou.myqcloud.com/login.jpg',
      show: false,
      show2: false,
      a: {
        fd: '2'
      },
      imgggg: '',
      percentage: 0

    }
  },

  methods: {
    //
    // 组件传值 -获取组件实例
    refhuoqu() {
      console.log(this.$refs.zi)
    },
    huoqusyouzj() {
      console.log(this.$children)
    },
    huoqugenzj() {
      console.log(this.$root)
    },
    // 国际化内部测试
    elneib() {
      this.$confirm(this.$t('home.qr'))
    },
    // 国际化
    xx(x) {
      this.$i18n.locale = x
    },
    ds() {
      const c = {
        fd: '1',
        fd2: '111'
      }

      console.log({ ...c })
    },

    ccc(e) {
      this.percentage = 0

      console.log(e, 1111111111111111)

      const file = e.target.files[0]

      cos.uploadFile({
        Bucket: 'htxm-1378475765', /* 填写自己的 bucket，必须字段 */
        Region: 'ap-guangzhou', /* 存储桶所在地域，必须字段 */
        Key: file.name, /* 存储在桶里的对象键（例如:1.jpg，a/b/test.txt，图片.jpg）支持中文，必须字段 */
        Body: file, // 上传文件对象
        SliceSize: 1024 * 1024 * 1, /* 触发分块上传的阈值，超过5MB使用分块上传，小于5MB使用简单上传。可自行设置，非必须 */
        onProgress: (progressData) => {
          // progressData 可以拿到进度条值0到1 想100 * 100 就行
          console.log(JSON.stringify(progressData))
          this.percentage = progressData.percent * 100
        }
      },
      (err, data) => {
        if (err) {
          console.log('上传失败', (err))
        } else {
          // data的 Location 可以拿到图片路径
          // Location:"htxm-1378475765.cos.ap-guangzhou.myqcloud.com/1.jpg"

          this.imgggg = 'http://' + data.Location
          console.log('上传成功', data)
        }
      })
    }

  }

}
</script>

<style>

</style>
